<template>
  <div class="check-task">
    <div>
      <eagle-input
        name="CheckPlanName"
        label="计划名称"
        v-model="data.CheckPlanName"
        placeholder="计划名称"
        required
        isInputText
      ></eagle-input>
      <eagle-input
        name="CheckTypeName"
        label="检查类型"
        v-model="data.CheckTypeName"
        required
        :islink="true"
        readonly
        @click="checkTypeName()"
        placeholder="请选择检查类型"
      ></eagle-input>
      <eagle-input
        name="ItemTypeName"
        v-if="data.CheckType == 'ZCLX0002'"
        label="专项类型"
        v-model="data.ItemTypeName"
        :islink="true"
        readonly
        placeholder="请选择专项类型"
        @click="chooseItemTypes()"
      ></eagle-input>
      <eagle-input
        title="检查要求"
        v-model="data.CheckRequirement"
        rows="3"
        autosize
        type="textarea"
        placeholder="请输入检查要求"
        multiRow
        isInputText
      ></eagle-input>
      <eagle-input
        name="CheckNames"
        v-model="data.CheckNames"
        label="检查人"
        :autosize="true"
        :islink="true"
        :rows="1"
        type="textarea"
        required
        readonly
        placeholder="请选择"
        @click="userChooseDialogShow = true"
      ></eagle-input>
      <eagle-input
        label="检查表"
        :placeholder="
          TCodes.length ? '已选择' + TCodes.length + '个检查表' : '请选择检查表'
        "
        style="margin-bottom: 10px"
        :border="false"
        :islink="true"
        readonly
        @click="dangerTemplateShow = true"
      ></eagle-input>
      <eagle-date
        label="开始时间"
        required
        :date.sync="data.StartDate"
      ></eagle-date>
      <eagle-date
        label="结束时间"
        required
        :date.sync="data.EndDate"
      ></eagle-date>
      <eagle-input
        label="计划重复"
        v-model="data.CheckFrequencyName"
        :islink="true"
        required
        readonly
        @click="_chooseTask()"
      ></eagle-input>
      <eagle-stepper
        :stepper.sync="data.Advance"
        name="Advance"
        label="提前生成"
        :min="0"
        postfix="天"
      ></eagle-stepper>
      <eagle-radio-group
        required
        label="包含周末"
        v-model="data.IncludingWeekend"
        name="IncludingWeekend"
        direction="horizontal"
        :dataSource="data.IncludingWeekends"
      ></eagle-radio-group>
      <eagle-radio-group
        v-show="data.CheckNames && data.CheckNames.split(',').length > 1"
        label="检查模式"
        v-model="data.JointInspection"
        name="JointInspection"
        :dataSource="data.JointInspections"
      ></eagle-radio-group>
      <van-field
        class="input_text mt-10"
        v-model="data.DCode"
        label="检查区域"
        :border="false"
        input-align="right"
      >
        <template #input>
          <!-- <span class="mr-20" style="color: green" @click="goInspectionWay()">巡检路线</span> -->
          <span style="color: green" @click="chooseDangerArea()">检查点</span>
        </template>
      </van-field>

      <div class="det_tab_item">
        <div class="operate_det">
          <div class="operate_list">
            <van-row class="operate_row_first">
              <van-col span="4">类别</van-col>
              <van-col offset="1" span="10">检查区域&检查表</van-col>
            </van-row>
            <van-row class="operate_row" v-for="(v, i) in Details3" :key="i">
              <van-col span="24">
                <van-row>
                  <van-col span="5">
                    {{ getCheckAreaTypeName(v,v.CheckAreaType) || "风险位置" }}
                  </van-col>
                  <van-col span="17">
                    <div class="mb-5">检查区域：{{ v.CheckArea }}</div>
                    <div>检查表：{{ v.TNames || "无" }}</div>
                  </van-col>
                </van-row>
                <van-divider />
                <van-row>
                  <van-col offset="6" span="18">
                    <van-row>
                      <van-col span="9">
                        <!-- <div @click="lookMyCheckListSet(v, i)">
                            <img
                              class="operation-imgs"
                              src="@/assets/Images/AppIcon/icon_list_verify.png"
                            />设置检查表
                          </div> -->
                      </van-col>
                      <van-col span="5">
                        <div @click="up(i)">
                          <img
                            class="operation-imgs"
                            src="@/assets/Images/AppIcon/icon_list_up.png"
                          />上移
                        </div>
                      </van-col>
                      <van-col span="5">
                        <div @click="down(i)">
                          <img
                            class="operation-imgs"
                            src="@/assets/Images/AppIcon/icon_list_down.png"
                          />下移
                        </div>
                      </van-col>
                      <van-col span="5">
                        <div @click="del(i)">
                          <img
                            class="operation-imgs"
                            src="@/assets/Images/AppIcon/icon_list_delete.png"
                          />删除
                        </div>
                      </van-col>
                    </van-row>
                  </van-col>
                </van-row>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
      <div class="bottom-btns">
        <eagle-button type="primary" class="submit-btn" @click="save(true)">
          提交并立即发布
        </eagle-button>
        <eagle-button type="info" class="submit-btn" @click="save(false)">
          暂存稍后发布
        </eagle-button>
      </div>
    </div>
    <!--检查表选择-->
    <danger-Template-dialog
      title="选择检查表"
      :show.sync="dangerTemplateShow"
      :tagData="templateTagData"
      @callback="dangerTemplateCallback"
      :isMulti="true"
      :tab="true"
    >
    </danger-Template-dialog>

    <!--检查人选择-->
    <user-choose-dialog
      title="选择检查人"
      :show.sync="userChooseDialogShow"
      :tagData="userTagData"
      @callback="userChooseCallback"
      :isMulti="true"
    >
    </user-choose-dialog>

    <!--检查点-->
    <danger-area-dialog
      :show.sync="chooseDangerAreaShow"
      @callback="_chooseChooseDangerArea"
      :tagData="Details3"
      title="选择检查点"
      :isMulti="true"
    ></danger-area-dialog>

    <!--检查类型-->
    <check-type-dialog
      v-model="show"
      :data="data"
      @close="closeCheckType"
    ></check-type-dialog>

    <danger-frequency-dialog
      v-model="showChooseTask"
      :data="data"
      @close="closeChooseTask"
    >
    </danger-frequency-dialog>

    <!--专项类型-->
    <choose-item-popup
      v-model="ItemTypesShow"
      :list="data.ItemTypes"
      @cb="_chooseItemTypes"
    >
    </choose-item-popup>

    <!--巡检路线-->
    <inspection-way-dialog
      v-model="inspectionWayShow"
      @inspectionWayCallback="inspectionWayCallback"
    ></inspection-way-dialog>
  </div>
</template>

<script>
import ChooseItemTypes from "@/components/ChooseItemTypes/ChooseItemTypes.vue";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
import store from "@/store/index";
import checkTypeDialog from "@/views/components/danger/checkTypeDialog.vue";
import chooseItemPopup from "@/views/components/danger/dangerItemPopup.vue";
import dangerTemplateDialog from "@/views/components/danger/dangerTemplateChooseDialog.vue";
import dangerFrequencyDialog from "@/views/components/danger/checkFrequencyDialog.vue";
import inspectionWayDialog from "@/views/components/danger/inspectionWayDialog.vue";
import dangerAreaDialog from "@/views/components/danger/dangerAreaDialog.vue";
export default {
  components: {
    ChooseItemTypes,
    UserChooseDialog,
    checkTypeDialog,
    chooseItemPopup,
    dangerTemplateDialog,
    dangerFrequencyDialog,
    inspectionWayDialog,
    dangerAreaDialog,
  },
  data() {
    return {
      data: {
        Advance: 3,
      },
      showCalendar: false,
      idx: "",
      show: false,
      showChooseTask: false,
      TCodes: [],
      TNames: [],
      Details3: [],
      showAdvance: false,
      chooseDangerAreaShow: false,
      dangerTemplateShow: false,
      userChooseDialogShow: false,
      ItemTypesShow: false,
      inspectionWayShow: false,
      filter: {
        id: this.$route.query.id,
        SourceID: 0,
      },
      params: [
        {
          title: "公司检查表",
          Name: "Keywords",
          dataType: "CompanyCMPLList",
        },
        {
          title: "公共检查表",
          Name: "Keywords",
          dataType: "SysCMPLList",
        },
        {
          title: "我的检查表",
          Name: "Keywords",
          dataType: "UserList",
        },
      ],
      listUser: [],
      listCheckTable: [],
      userParams: [
        {
          Name: "ChnName",
          dataType: "List",
          accounted: true,
          userKind: 0,
        },
      ],
      chooseCheckTableUrl: "/DangerTemplate/GetPageData",
      userTagData: [],
      templateTagData: [],
    };
  },
  created() {
    if (this.filter.id > 0) {
      store.commit("updateTitle", "编辑检查计划");
      this.getCheckPlan();
    } else {
      this.checkPlanInitNewEntity();
      store.commit("updateTitle", "创建检查计划");
    }
  },
  methods: {
    _initListUser(list) {
      this.listUser = list;
    },
    _initListChcekTable(list) {
      this.listCheckTable = list;
    },
    // 获取检查区域
    getPatrolRouteDetail(id) {
      
      let that = this;
      that.$axios
      .get("/DangerPatrolRoute/GetPatrolRouteDetail",{params:{ id: id }})
      .then((res) => {
        
        res.data.forEach((item, index) => {
          that.Details3.forEach((item1, index1) => {
            if (item.CheckAreaCode == item1.CheckAreaCode) {
              that.Details3.splice(index1, 1);
            }
          });
        });
        that.Details3 = that.Details3.concat(res.data);
      });
    },
    // 修改天数
    openAdvance() {
      this.showAdvance = true;
    },
    closeAdvance(type) {
      if (type) {
        this.data.Advance = type;
      }
      this.showAdvance = false;
    },
    // 计划详情
    checkPlanInitNewEntity() {
      let that = this;
      that.$axios
      .get("/DangerCheckPlan/InitNewEntity",{params:that.filter})
      .then((res) => {
        res.data.CheckTypes.push({ ID: 0, Name: "自定义" });
        that.data = res.data;
        if (that.data.CheckCodes) {
          let checkUserNameArr = that.data.CheckCodes.split(",");
          for (var i = 0; i < checkUserNameArr.length; i++) {
            that.userTagData.push({
              code: checkUserNameArr[i],
            });
          }
        }
      });
    },

    // 计划详情
    getCheckPlan() {
      let that = this;
      that.$axios
      .get("/DangerCheckPlan/GetDetail",{params:that.filter})
      .then((res) => {
        res.data.CheckTypes.push({ ID: "0", Name: "自定义" });
        that.data = res.data;
        if (that.data.Details3 && that.data.Details3.length > 0) {
          for (var m = 0; m < that.data.Details3.length; m++) {
            let item3 = that.data.Details3[m];
            item3.AreaCode = item3.CheckAreaCode;
            item3.AreaName = item3.CheckArea;
            item3.AreaType = item3.CheckAreaType;
          }
          that.Details3 = that.data.Details3;
        } else {
          that.Details3 = [];
        }
        that.TCodes = that.data.TCodes ? that.data.TCodes.split(",") : [];
        that.TNames = that.data.TNames ? that.data.TNames.split(",") : [];
        if (that.TCodes.length > 0) {
          for (var i = 0; i < that.TCodes.length; i++) {
            that.templateTagData.push({
              TCode: that.TCodes[i],
              Title: "",
              code: that.TCodes[i],
              name: "",
            });
          }
          for (var j = 0; j < that.templateTagData.length; j++) {
            that.templateTagData[j].Title = that.templateTagData[j].name =
              that.TNames[j];
          }
        }
        if (that.data.CheckCodes) {
          let checkUserNameArr = that.data.CheckCodes.split(",");
          for (var i = 0; i < checkUserNameArr.length; i++) {
            that.userTagData.push({ code: checkUserNameArr[i] });
          }
        }
      });
    },

    // 选择检查类型
    checkTypeName() {
      this.show = true;
    },

    closeCheckType(type) {
      if (type) {
        if (type.indexOf("Custom") >= 0) {
          this.data.CheckTypeName = type.substring(7);
        } else {
          this.data.CheckTypes.forEach((item) => {
            if (item.ID == type) {
              this.data.CheckTypeName = item.Name;
            }
          });
        }
        this.data.CheckType = type;
      }
      this.show = false;
    },

    /* 上移 */
    up(index) {
      if (this.Details3.length > 1 && index !== 0) {
        this.Details3 = this.swapItems(this.Details3, index, index - 1);
      }
    },
    // 下移
    down(index) {
      if (this.Details3.length > 1 && index !== this.Details3.length - 1) {
        this.Details3 = this.swapItems(this.Details3, index, index + 1);
      }
    },
    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    // 删除
    del(index) {
      this.Details3.splice(index, 1);
    },
    // 选择专项类型
    chooseItemTypes() {
      this.ItemTypesShow = true;
    },
    _chooseItemTypes(ItemType) {
      if (ItemType) {
        this.data.ItemType = ItemType;
        this.data.ItemTypes.forEach((item) => {
          if (item.ID == this.data.ItemType) {
            this.data.ItemTypeName = item.Name;
          }
        });
      }
      this.ItemTypesShow = false;
    },
    // 选择路线
    goInspectionWay() {
      this.inspectionWayShow = true;
      // this.$router.push('/Danger/InspectionWay')
      // this.$router.push({
      //   name: "InspectionWay",
      //   params: {
      //     path: "CheckTask",
      //   },
      // });
    },
    dangerTemplateCallback(templateList) {
      this.data.TCodes = "";
      this.data.TNames = "";
      this.TCodes = [];
      this.templateTagData = templateList;
      if (templateList && templateList.length > 0) {
        let codeArr = [];
        let nameArr = [];
        for (var i = 0; i < templateList.length; i++) {
          codeArr.push(templateList[i].code);
          nameArr.push(templateList[i].name);
        }
        this.data.TCodes = codeArr.join();
        this.data.TNames = nameArr.join();
        this.TCodes = codeArr;
      }
      this.dangerTemplateShow = false;
    },
    // 设置检查表
    lookMyCheckListSet(item, idx) {
      this.$router.push({
        name: "MyCheckListSet",
        params: {
          path: "CheckTask",
          item: item,
          idx: idx,
        },
      });
    },
    // 选择检查点
    chooseDangerArea() {
      this.chooseDangerAreaShow = true;
    },
    _chooseChooseDangerArea(result) {
      
      this.Details3 = result;
      this.chooseDangerAreaShow = false;
    },
    userChooseCallback(userlist) {
      this.userTagData = userlist;
      if (userlist) {
        const code = userlist.map((item) => {
          return item.code;
        });
        const name = userlist.map((item) => {
          return item.name;
        });
        this.data.CheckNames = name.join(",");
        this.data.CheckCodes = code.join(",");
      }
      this.userChooseDialogShow = false;
    },
    // 选择计划重复
    _chooseTask() {
      this.showChooseTask = true;
    },
    closeChooseTask(type) {
      if (type) {
        this.data.CheckFrequency = type;
        this.data.CheckFrequencies.forEach((item) => {
          if (item.ID == type) {
            this.data.CheckFrequencyName = item.Name;
          }
        });
      }
      this.showChooseTask = false;
    },

    // 	检查类型
    close(type) {
      if (type) {
        if (type.indexOf("Custom") >= 0) {
          this.data.CheckTypeName = type.substring(7);
        } else {
          this.data.CheckTypes.forEach((item) => {
            if (item.ID == type) {
              this.data.CheckTypeName = item.Name;
            }
          });
        }
        this.data.CheckType = type;
      }

      this.show = false;
    },
    save(IsPublish) {
      if (!this.data.CheckPlanName) {
        return this.$toast("请填写计划名称");
      }
      if (!this.data.CheckType) {
        return this.$toast("请选择检查类型");
      }
      if (this.data.CheckType == "ZCLX0002") {
        if (!this.data.ItemType) {
          return this.$toast("请选择专项类型");
        }
      }
      if (!this.data.CheckNames) {
        return this.$toast("请选择检查人");
      }
      if (!this.data.IncludingWeekend) {
        return this.$toast("是否包含周末");
      }
      this.loading = true;
      let param = {
        ID: this.data.ID,
        SourceID: 0,
        IsPublish: IsPublish,
        CheckPlanName: this.data.CheckPlanName,
        CheckType: this.data.CheckType,
        ItemType: this.data.ItemType,
        CheckArea: this.data.CheckArea,
        CheckRequirement: this.data.CheckRequirement,
        TCodes: this.data.TCodes,
        TNames: this.data.TNames,
        CheckCodes: this.data.CheckCodes,
        CheckNames: this.data.CheckNames,
        StartDate: this.data.StartDate,
        EndDate: this.data.EndDate,
        CheckFrequency: this.data.CheckFrequency,
        Advance: this.data.Advance,
        AdvanceFrequency: this.data.AdvanceFrequency,
        IncludingWeekend: this.data.IncludingWeekend,
        JointInspection: this.data.JointInspection,
      };
      if (this.data.ItemType) {
        param.ItemType = this.data.ItemType;
      }
      param.Details3 = this.Details3;
      let that = this;
      let url = "/DangerCheckPlan/Add";
      if (this.data.ID) {
        url = "/DangerCheckPlan/Edit";
      }
      that.$axios
        .post(url + "?IsPublish=" + IsPublish,param)
        .then((res) => {
          that.$toast("保存成功");
          that.loading = false;
          setTimeout(() => {
            that.$router.goRefresh(-1);
          }, 500);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    closeItemTypes() {
      this.ItemTypesShow = false;
    },
    inspectionWayCallback(item) {
      this.inspectionWayShow = false;
    },
    getCheckAreaTypeName(item,areaType) {
      
      let areaTypeName = "";
      if (!areaType) {
        return "";
      }
      switch (areaType) {
        case "RiskUnit":
          areaTypeName = "风险位置";
          break;
        case "RiskPoint":
          areaTypeName = "风险点";
          break;
        case "RiskUnitArea":
          areaTypeName = "风险区域";
          break;
        case "RentalPlace":
          areaTypeName = "出租场所";
          break;
        case "UserOrg":
          areaTypeName = "部门/班组";
          break;
        case "Equipment":
          areaTypeName = "设施设备";
          break;
        default:
          "";
          break;
      }
      return areaTypeName;
    },
  },
};
</script>

<style lang="less" scoped>
.check-task {
  background-color: #e8f1f8;
  padding-bottom: 20px;
}
.problem {
  margin-bottom: 10px;
}
.bottom-btns {
  margin-top: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .submit-btn {
    width: 48%;
    height: 35px;
    font-size: 14px;
  }
}

.det_tab_item {
  padding: 10px 0;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;

  .det_tab_item_text {
    padding: 0 10px;
  }
}
.operate_det {
  background-color: #fff;
  padding: 10px;
  .operate_list {
    font-size: 12px;
    border: 1px solid #e8f1f8;
    .operate_row_first {
      padding: 10px;
      background-color: #e8f1f8;
      border-bottom: 1px solid #e8f1f8;
      margin-bottom: 10px;
    }
    .operate_row {
      padding: 10px;
      border-bottom: 1px solid #e8f1f8;
      /*margin-bottom: 10px;*/
    }
  }
}
.operation-imgs {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-right: 5px;
}

.risk_item_radio {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-bottom: 1px solid #e8f1f8;
}
</style>
